<template>
    <el-card shadow="never">
         <!--:body-style="{ padding: '200px' }"  -->
         <el-row>
            <el-col :span="24">
                <div class="member_info_wrapper">
                    <div class="section base-info">
                        <div class="user_info">
                            <div class=" account-avatar" style="cursor: pointer; background-image:url(&quot;https://rs.dance365.com/default_head@3x.png?imageView2/0/w/200/h/1200/format/webp/ignore-error/1&quot;);"></div>
                            <div class="name-info">
                                <div class="name">132253_053u</div>
                                <div class="status"> <router-link to="/level-instruction"><i>LV1</i></router-link></div>
                            </div>
                        </div>
                        <div class="saving">开通会员平均每年可省：￥9500</div>
                        <div class="price_area_main">
                            <div class="price_area" @click="changeMenu">
                                <div class="price_block">
                                    <div class="price_box_container">
                                        <!-- <div class="recommend_flag"><span class="recommend_btn">推荐</span></div> -->
                                        <p>季度会员</p>
                                        <div> ￥
                                            <div class="big_size"><span>98</span><span style="font-size: 16px;">/季</span></div>
                                        </div>
                                        <p> 合计￥98(青少年专属)</p>
                                    </div>
                                </div>
                                <div class="price_block">
                                    <div class="price_box_container">
                                        <!-- <div class="recommend_flag"><span class="recommend_btn">推荐</span></div> -->
                                        <p>1年会员</p>
                                        <div> ￥
                                            <div class="big_size"><span>268</span><span style="font-size: 16px;">/年</span></div>
                                        </div>
                                        <p> 合计￥268</p>
                                    </div>
                                </div>
                                <div class="price_block">
                                    <div class="price_box_container active">
                                        <!-- <div class="recommend_flag"><span class="recommend_btn">推荐</span></div> -->
                                        <p>3年会员</p>
                                        <div> ￥
                                            <div class="big_size"><span>196</span><span style="font-size: 16px;">/年</span></div>
                                        </div>
                                        <p> 合计￥588(省￥216)</p>
                                    </div>
                                </div>
                            </div>
                            <div class="btn_area">
                                <el-button class="pay_btn" type="default" size="small">立即以588元开通</el-button>
                            </div>
                            <el-row class="agreement_guide" justify="center">
                                <el-col :span="10"><div>开通即视为同意<a href="javascript:void(0)" onclick="alert('别瞎点宝子~');return false;" class="agreement_link">《会员服务协议》</a></div></el-col>
                                
                            </el-row>
                        </div>
                    </div>
                    <!-- 下面的 -->
                    <div class="section member_benefits">
                        <div class="title">会员专属权益</div>
                        <el-row justify="space-between">
                            <el-col :span="4" v-for="item in [1,2,3,4,5,6,7,8,9,10,11,12]">
                                <ul class="member_right_list">
                            <li class="right_item">
                                <el-popover
                                    placement="top"
                                    title="报课"
                                    trigger="hover"
                                    >
                                   <p>尚硅谷的<span class="count">前端</span>课程，快来领取一下</p>
                                     <template #reference>
                                        <div>
                                            <span class="icon" data-src="https://rs.dance365.com/teach_video_free.png" lazy="loaded" style="background-image: url(&quot;https://rs.dance365.com/teach_video_free.png&quot;);"></span>
                                            <div style="margin: 1em 0px;">
                                                <p><span style="color:rgb(249, 54, 132)">713</span> 个会员专区</p>
                                                <p>课程免费学习</p>
                                            </div>
                                        </div>
                                    </template>
                            </el-popover>
                            </li>
                        </ul>
                            </el-col>
                        </el-row>
                        
                        
                    </div>
                </div>
            </el-col>
         </el-row>
    </el-card>
                     
                
</template>

<script setup>


</script>

<style scoped lang="less">
    
.member_info_wrapper{    
    .base-info{
        padding-bottom: 37px;
        text-align: center;
    }
    .member_benefits{
        padding-bottom: 15px;
    }
    .section{
        border-bottom: 1px solid #e3e3e3 ;
        .title{
            color: #111;
            font-weight: 700;
            font-size: 20px;
            margin-top: 32px;
        }
        .member_right_list{
            list-style: none;
            padding-left: 8px;
            // justify-content: space-between;
            color: #111;
            font-weight: 400;
            margin: 20px 0 5px;
            .right_item{
                position: relative;
                white-space: normal;
                margin-right: 30px;
                line-height: 20px;
                width: 129px;
                height: 129px;
                box-sizing: border-box;
                border: 1px solid #e3e3e3;
                border-radius: 8px;
                text-align: center;
                padding: 14px 0 0;
                font-size: 14px;
                // justify-content: center;
                align-items: center;
                display: inline-block;
                vertical-align: middle;
                margin-bottom: 30px;
                .icon{
                    display: block;
                    margin: 0 auto;
                    width: 46px;
                    height: 42px;
                    background-size: cover;
                }
      
                .popup_content{
                    text-align: left;
                    margin-top: 15px;
                    font-size: 14px;
                    color: #333;
                    line-height: 24px;              
                }
            }
        }
        .agreement_guide{
            font-size: 14px;
        }
        .agreement_link{
            text-decoration: none;
            color: #f93684;
        }
        .btn_area{
            margin: 0 auto;
            position: relative;
            display: block;
            width: 330px;
            
            .pay_btn{
                width: 330px;
                height: 56px;
                font-size: 16px;
                margin: 30px auto 12px;//上 左右 下
                border-radius: 10px;
                background: linear-gradient(-56deg,#ff4683,#ff638f);
                color: #fff;
                cursor: pointer;
                left: 500px;
            }
            }

        p {
            // display: block;
            margin: 0;
            padding: 0;
            line-height: 20px;
        
            }
        .saving{
            text-align: center;
            margin-top: 19px;
            font-size: 15px;
            font-weight:500;
        }
        .price_area{
            width: 720px;
            display: flex;
            align-items: center;
            min-height: 124px;
            // flex-wrap:wrap;
            margin: 21px auto 0;
            .price_block{
                margin-top: 30px;
                .active{
                    border: 2px solid #f93684;
                    background-color: #f9ebf1;
                    color: #f93684;
                }
                .price_box_container{
                position: relative;
                box-sizing: border-box;
                margin-right: 30px;
                width: 220px;
                height: 124px;
                border: 1px solid #b1b5c1;
                border-radius: 10px;
                text-align: center;
                cursor: pointer;
                display: flex;
                justify-content: space-evenly;
                flex-direction:column;

        }
                .recommend_flag{
                    display: none;
                }
                .big_size{
                    display: inline-block;
                    font-size: 30px;
                }
            }
        }
        .user_info{
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            .name-info{
                margin-left: 21px;
                font-size: 20px;
                color: #000;
                .name{
                    cursor:pointer;
                    text-align:left;
                }
                .status{
                    margin-top: 14px;
                    font-size: 14px;
                    color: #f93684;
                    text-align: left;
                }
            }
        }
    }
    
    .account-avatar {
        display: inline-block;
        width: 100px;
        height: 100px;
        border-radius: 100%;
        background-color: #eee;
        background-size: cover;
        background-position: 50%;
        background-repeat: no-repeat;
    }
}
</style>